<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>前端下载 ZIP 文件</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
</head>
<body>
<h1>前端下载 ZIP 文件（包含图片）</h1>
<button id="downloadBtn">下载 ZIP 文件 --- 将多个图片打包下载成zip 文件</button>

<script>
document.getElementById('downloadBtn').addEventListener('click', async () => {
    // 创建 JSZip 实例
    const zip = new JSZip();

    // 图片 URL 列表
    const imageUrls = [
        'https://img1.baidu.com/it/u=2087009195,4252657913&fm=253&fmt=auto&app=138&f=PNG?w=349&h=581',
        'https://img1.baidu.com/it/u=2087009195,4252657913&fm=253&fmt=auto&app=138&f=PNG?w=349&h=581',
        'https://img1.baidu.com/it/u=2087009195,4252657913&fm=253&fmt=auto&app=138&f=PNG?w=349&h=581'
    ];

    // 异步加载图片并添加到 ZIP 文件中
    for (let i = 0; i < imageUrls.length; i++) {
        const url = imageUrls[i];
        const response = await fetch(url);
        const blob = await response.blob(); // 将图片转换为 Blob 格式
        zip.file(`image${i + 1}.png`, blob); // 添加到 ZIP 文件
    }

    // 生成 ZIP 文件
    zip.generateAsync({ type: 'blob' }).then((content) => {
        // 下载 ZIP 文件
        saveAs(content, 'images.zip'); // 使用 FileSaver.js 保存文件
    });
});
</script>
</body>
</html>